<template>
  <div class="notice">
    <div class="notice-header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/agent/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>站内公告</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div :class="isNODetails ? 'notice-content clearfloat' : 'notice-content clearfloat noDetails'">
      <div class="content_list fl">
        <div class="header item">
          <el-checkbox v-model="delChecked" @change='AllDelChange'></el-checkbox>
          <el-input
            placeholder="输入消息标题搜索消息"
            @change='search'
            @@keyup.enter.native="search"
            v-model="headerText">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button @click.stop="determineDel" :class="getDelSums > 0 ? 'is_activity' : '' ">删除</el-button>
        </div>
        <div class="list" @scroll="showScrolbar" @mouseleave='hidScrolbar' id="listDOM">
          <div 
            :class='isReadOrNo(item.status) ? "item list_item read" : "item list_item"' 
            v-for="(item,index) in messageData" 
            :key="index"
            @mouseenter="showOpenDetails(item)" 
            @click="openDeatils(item)">
            <div @click.stop>
              <el-checkbox v-model="item.delChecked" ></el-checkbox>
            </div>
            <span class="time">{{item.created_at | newsTime}}</span>
            <div class="info">
              <!-- <el-tooltip effect="dark" :content="item.title" placement="top" > -->
              <span class="title" v-html="item.title"></span>
              <!-- </el-tooltip> -->
              <br/>
              <!-- <el-tooltip effect="dark" :content="item.abstract" placement="bottom" > -->
              <span class="abstract">{{item.news | regNews}}</span>
              <!-- </el-tooltip> -->
            </div>
            <div class="openDetails" v-show="item.showOpenDetails" @click.stop="closeOpenDetails(item.showOpenDetails, index)">
              <i :class="item.openDetails ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
            </div>
            <span class="tag" ></span>
          </div>
        </div>
      </div>
      <div class="content_details fl" v-if='isNODetails'>
        <div class="head clearfloat">
          <el-tooltip effect="dark" :content="noticeDetails.title" placement="top" >
            <span class="title">{{noticeDetails.title}}</span>
          </el-tooltip>
          <i class="el-icon-delete fr del" @click="delAloneNotice"></i>
        </div>
        <div class="content">
          <div v-html="noticeDetails.news" class="content_news"></div>
          <div class="content_publisher">
            <div class="wrap">
              <span class="publisher">{{noticeDetails.publisher}}</span>
              <span class="time">{{noticeDetails.created_at | newsTime}}</span>
            </div>
            
          </div>
        </div>
      </div>
      <div class="content_details fl" v-else>
        <span class="nomessage">当前对话框暂无消息</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      headerText: '',
      delChecked:false,
      messageData: [],
      listDOM: {},
      isNODetails: false,
      noticeDetails: {}
    }
  },
  mounted () {
    if(process.client) {
      this.listDOM = document.getElementById('listDOM') 
    }
  },
  computed: {
    getDelSums () {
      let delData = this.messageData.filter((item)=> item.delChecked )
      return delData.length
    }
  },
  watch: {
    messageData: {
      handler: function(val) {
        let isAllDel = val.some(v => v.delChecked == false)
        if (isAllDel) {
          this.delChecked = false
        }
      },
      deep: true
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 搜索
    search(val) {
      let params = {
        title: val
      }
      this.getData(params, true)
      this.isNODetails = false
      
    },

    /**
     *  设置搜索标题字段高亮
     * @param resultsList {Array} 匹配用的数组
     */
    searchHighilight(resultsList) {
      resultsList.map((item, index) => { 
        if (this.headerText && this.headerText.length > 0) { 
          let replaceReg = new RegExp(this.headerText, 'g')
          // 高亮替换v-html值
          let replaceString =
            '<span class="highilight">' + this.headerText + '</span>'
          resultsList[index].title = item.title.replace(
            replaceReg,
            replaceString
          )
        }
      })
      this.messageData = []
      this.messageData = resultsList
    },
    delAloneNotice () {
      let ids = []
      ids.push(this.noticeDetails.id)
      ids.join(',')
      this.delRequest(ids)
    },
    // 删除
    determineDel() {
      if (this.getDelSums == 0) {
        this.$alert('请至少选择一条公告', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
        return
      } else {
        let delData = this.messageData.filter((item)=> item.delChecked )
        let delDataChecked = []
        for (let i = 0; i <delData.length; i++) {
          delDataChecked.push(delData[i].id)
        }
        delDataChecked.join(",")
          this.$confirm(`<span>确认删除 <i class="font_danger">${this.getDelSums}</i> 条记录吗</span>`, '删除消息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            dangerouslyUseHTMLString: true,
            center: true,
            type: 'warning'
          }).then(() => {
            this.delRequest(delDataChecked)
          }).catch(() => {
        })
      }
      
    },
    delRequest (id) {
      let params = {
        id: id
      }
      this.$axios.put(`api/news/del_system_news`, params).then( res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message:'删除成功'
          })
          this.getData()
          this.isNODetails = false
        } else {
          // this.$message.error()
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    // 查看详情
    openDeatils(item) {
      let params = {
        news: item.id
      }
      this.$axios.get(`api/news/${item.id}`, {params:params}).then(res => {
        if (res.data.code == 200) {
          this.noticeDetails = res.data.data

          this.$nextTick(() => {
            if (!item.status || item.status == 2) {
              this.readMessage(item.id)
            }
          })
          for (let i = 0; i < this.messageData.length; i++) {
            if (this.messageData[i].id == item.id) {
              this.$set(this.messageData[i],"openDetails", true)
            } else {
              this.$set(this.messageData[i],"openDetails", false)
            }
          }

          this.isNODetails = true
        } else {
          this.$message.error('服务器繁忙，获取消息数据失败！')
        }
      })
    },
    // 读取消息
    readMessage(id) {
      let params = {
        news: id
      }
      this.$axios.post(`api/news/${id}/set_read`, params).then(res => {
        if (res.data.code == 200) {
          this.getData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 判断是否已读
    isReadOrNo(value) {
      if (value) {
        if (value == 2) {
          return true
        } else {
          return false
        }
      } else {
        return true
      }
    },
    /**
     * 获取公告数据
     * @param args {Object} 获取数据传值参数
     * @param highilight {Boolean} 是否高亮 查询标题的时候用
     */
    getData(args, highilight) {
      let params = {
        // status: ['1','2'],
      }
      if (args) {
        params = {...params, ...args}
      }
      this.$axios.get('api/news/get_no_read_news', {params: params}).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          for (let i = 0; i < data.length; i++) {
            this.$set(data[i],"delChecked", false)
            this.$set(data[i],"openDetails", false)
            this.$set(data[i],"showOpenDetails", false)
          }
          this.messageData = data
          if (highilight) {
            this.searchHighilight(this.messageData)
          }
        }
      })
    },
    // 全选
    AllDelChange(val) {
      for (let i = 0; i < this.messageData.length; i++) {
        this.$set(this.messageData[i],"delChecked", val)
      }
    },
    // 显示列表滚动条
    showScrolbar () {
      this.listDOM.classList.add("showScrolbar")
    },
    // 隐藏滚动条
    hidScrolbar () {
      this.listDOM.classList.remove("showScrolbar")
    },
    // 
    showOpenDetails(item) {
      
      for(let i = 0;i < this.messageData.length; i++) {
        console.log(this.messageData[i].id)
        console.log(item.id)
        if (this.messageData[i].id == item.id) {
          this.$set(this.messageData[i],"showOpenDetails", true)
        } else {
          this.$set(this.messageData[i],"showOpenDetails", false)
        }
      }
    },
    closeOpenDetails (show, index) {
      if (show) {
        this.messageData[index].openDetails = false
        this.isNODetails = false
      } else {
        this.messageData[index].openDetails = true
      }
    }
  }
}
</script>

<style lang='less' >
  .notice {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding: 25px 30px;
    background: #fff;
    box-sizing: border-box;
    &-header {
      height: 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child { 
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
        
      }
      border-bottom:2px solid #e5e5e5;
      box-sizing: border-box;
    }
    &-content {
      height: calc(100% - 45px);
      box-sizing: border-box;
      padding: 15px 0 0 0;

      .content_list {
        width: 470px;
        height: 100%;
        .item {
          border-bottom: 2px solid rgba(220,220,220,1);

          .el-checkbox {
            .el-checkbox__input {
              .el-checkbox__inner {
                width: 15px;
                height: 15px;
                border-radius: 0px;

                border:1px solid rgba(149,149,149,1);
                background:linear-gradient(180deg,rgba(239,239,239,1) 0%,rgba(229,229,229,1) 100%);
                color: #ededee;
              }
            }
          }
          .is-checked {
            .el-checkbox__inner::after {
              border: 1px solid rgba(0,0,0,1);
              border-left: 0;
              border-top: 0;
            }
          }
        }
        .item:last-child {
          border-bottom: 0;
        }
        .header {
          height: 80px;
          padding: 15px 0 10px 0;
          box-sizing: border-box;
          .el-input {
            width: 320px;
            margin-left: 20px;
            font-size: 18px;
            .el-input__inner {
              padding-left: 55px;
              border:1px solid rgba(186,186,186,1);
              border-radius:5px;
            }
            .el-input__prefix {
              left: 20px;
              .el-input__icon {
                font-size: 26px;
              }
            }
          }
          .el-button {
            border: 1px solid rgba(186,186,186,1);
            border-radius: 5px;
            font-size: 18px;
            padding: 10px 20px;
            color:rgba(186,186,186,1);
            margin-left: 5px;
          }
          .is_activity {
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
          }
        }
        .list {
          height: calc(100% - 60px );
          // height: 100%;
          overflow-y: auto;
          .list_item {
            display: flex;  
            height: 75px;
            position: relative;

            .tag {
              width:8px;
              height:8px;
              background:rgba(191,191,191,1);
              border-radius:50%;
              position:absolute;
              left: 55px;
              top: 50%;
              transform: translate(0, -50%);
            }
            .el-checkbox {
              position:absolute;
              top: 50%;
              transform: translate(0, -50%);
            }
            .time {
              position:absolute;
              top: 50%;
              left: 85px;
              transform: translate(0, -50%);
              font-size:18px;
              color:rgba(52,52,52,1);
            }
            .info {
              width: 180px;
              line-height: 26px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              position:absolute;
              top: 50%;
              left: 250px;
              transform: translate(0, -50%);
              .title {
                font-size: 18px;
                color: #343434;
                font-weight: 700;
              }
              .abstract {
                font-size: 15px;
                color: #a4a4a4;
              }

            }
            .openDetails {
              position:absolute;
              top: 50%;
              left: 440px;
              transform: translate(0, -50%);
              i {
                font-size: 18px;
              }
            }
          }
          .read {
            .tag {
              background:rgba(244,0,0,1);
            }
          }
          .list_item:hover {
            background:rgba(248,248,248,1);
          } 
        }
        .list::-webkit-scrollbar {
          display: none;
        }
        .list::-webkit-scrollbar-thumb {
          background:rgba(191,191,191,1);
        }
        .showScrolbar::-webkit-scrollbar {
          display: block;
        }
        
        
      }

      .content_details {
        width:calc(100% - 470px);
        height: 100%;
        background:rgba(248,248,248,1);
        position: relative;
        .head {
          height: 80px;
          line-height: 80px;
          background:rgba(239,239,239,1);
          padding: 0 50px 0 30px;
          box-sizing: border-box;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          position: relative;
          .title {
            font-size:25px;
            color:rgba(52,52,52,1);
          }
          .del {
            font-size: 25px;
            position:absolute;
            right: 15px;
            top: 27px;
          }
          .del:hover {
            color: #409eff;
          }
        }
        .content {
          height: calc(100% - 80px);
          padding: 0 0 25px 30px;
          box-sizing: border-box;
          position: relative;
          &_news {
            height: calc(100% - 60px);
            // padding-bottom: 60px;
            padding: 25px 25px 0 0;
            box-sizing: border-box;
            overflow-y: auto;
          }
          &_publisher {
            height: 60px;
            .wrap {
              position: absolute;
              bottom: 20px;
              right: 30px;
              font-size: 18px;
              color:rgba(186,186,186,1);
            }
            .publisher {
              margin-right: 10px;
            }
          }
        }
        .nomessage {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          
          font-size: 25px;
          font-family:Source Han Sans CN;
          color:rgba(135,135,135,1);
        }
      }
    }
    .noDetails {
      padding-right: 0;
      .content_list {
        width: 100%;
        .list {
          .list_item {
            .openDetails {
              right: 10px;
              left: auto;
            }
            .info {
              width: 550px;
              left: 120px;
            }
            .time {
              right: 80px;
              left: auto;
            }
          }
        }
      }
      .content_details {
        display: none;
      }
    }
    .highilight {
      background: yellow;
    }
  }
</style>